<template>
    <div class="password-container">
        <div class="control-panel">
            <div class="options-panel">
                <div class="length-input">
                    <span>密码长度:</span>
                    <n-input-number
                        v-model:value="length"
                        :min="4"
                        :max="32"
                        :show-button="false"
                        class="number-input"
                    />
                </div>
                <n-space horizontal>
                    <n-checkbox v-model:checked="includeLowercase">小写字母 (a-z)</n-checkbox>
                    <n-checkbox v-model:checked="includeUppercase">大写字母 (A-Z)</n-checkbox>
                    <n-checkbox v-model:checked="includeNumbers">数字 (0-9)</n-checkbox>
                    <n-checkbox v-model:checked="includeSpecial">特殊字符 (!@#$%^&*)</n-checkbox>
                </n-space>
            </div>
            <div class="button-group">
                <n-button type="primary" @click="generatePassword" :disabled="!canGenerate">
                    生成密码
                </n-button>
                <n-button @click="clearAll" :disabled="passwords.length === 0">
                    清空
                </n-button>
            </div>
        </div>

        <div class="result-panel">
            <div v-if="passwords.length === 0" class="empty-tip">
                点击生成按钮开始生成密码
            </div>
            <n-scrollbar v-else>
                <div
                    v-for="(password, index) in passwords"
                    :key="index"
                    class="password-item"
                    @click="copyPassword(password)"
                >
                    <span class="password-text">{{ password }}</span>
                    <n-tooltip trigger="hover">
                        <template #trigger>
                            <n-button quaternary circle size="small">
                                复制
                            </n-button>
                        </template>
                        点击复制
                    </n-tooltip>
                </div>
            </n-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import view from '@renderer/util/ui/ViewUtil'

// 密码选项
const length = ref(12)
const includeLowercase = ref(true)
const includeUppercase = ref(true)
const includeNumbers = ref(true)
const includeSpecial = ref(false)

// 密码列表
const passwords = ref<string[]>([])

// 字符集
const charSets = {
    lowercase: 'abcdefghijklmnopqrstuvwxyz',
    uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    numbers: '0123456789',
    special: '!@#$%^&*'
}

// 是否可以生成密码
const canGenerate = computed(() => {
    return includeLowercase.value || 
           includeUppercase.value || 
           includeNumbers.value || 
           includeSpecial.value
})

// 获取选中的字符集
const getSelectedChars = () => {
    let chars = ''
    if (includeLowercase.value) chars += charSets.lowercase
    if (includeUppercase.value) chars += charSets.uppercase
    if (includeNumbers.value) chars += charSets.numbers
    if (includeSpecial.value) chars += charSets.special
    return chars
}

// 生成随机密码
const generateRandomPassword = () => {
    const chars = getSelectedChars()
    let password = ''
    
    // 确保至少包含每种选中的字符类型
    if (includeLowercase.value) {
        password += charSets.lowercase[Math.floor(Math.random() * charSets.lowercase.length)]
    }
    if (includeUppercase.value) {
        password += charSets.uppercase[Math.floor(Math.random() * charSets.uppercase.length)]
    }
    if (includeNumbers.value) {
        password += charSets.numbers[Math.floor(Math.random() * charSets.numbers.length)]
    }
    if (includeSpecial.value) {
        password += charSets.special[Math.floor(Math.random() * charSets.special.length)]
    }

    // 填充剩余长度
    while (password.length < length.value) {
        password += chars[Math.floor(Math.random() * chars.length)]
    }

    // 打乱密码字符顺序
    return password.split('').sort(() => Math.random() - 0.5).join('')
}

// 生成密码
const generatePassword = () => {
    if (!canGenerate.value) {
        view.alertWarningMessage('请至少选择一种字符类型')
        return
    }
    
    const newPassword = generateRandomPassword()
    passwords.value.unshift(newPassword)
}

// 复制密码
const copyPassword = async (password: string) => {
    try {
        await navigator.clipboard.writeText(password)
        view.alertSuccessMessage('复制成功')
    } catch (error) {
        view.alertErrorMessage('复制失败')
    }
}

// 清空
const clearAll = () => {
    passwords.value = []
}
</script>

<style scoped>
.password-container {
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.control-panel {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.options-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.length-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.number-input {
    width: 100px;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
}

.result-panel {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.empty-tip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-3);
}

.password-item {
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.password-item:hover {
    background-color: var(--hover-color);
}

.password-text {
    font-family: monospace;
    user-select: all;
}
</style>